<template>
	<view class="container">
		<view class="className">
			hello~你好
		</view>
		<view class="basic-box">
			<view class="" v-for="(v,i) in basic" :key="v.id" @click="">
				<text :class="['t-icon',v.icon]"></text>
				<view class="">
					{{v.title}}
				</view>
			</view>
		</view>
		<view class="mineInfor">
			<!-- <view class="" @click="toHomePro">
				<text class="title">icon 我的房产</text>
				
				<text class="t-icon t-icon-youjiantou"></text>
			</view> -->
			<view class="">
				<view class="title">
					<text class="t-icon t-icon-41"></text> 实名认证
				</view>

				<text class="t-icon t-icon-youjiantou"></text>
			</view>
			<view class="">
				<view class="title">
					<text class="t-icon t-icon-41"></text>车辆管理
				</view>

				<text class="t-icon t-icon-youjiantou"></text>
			</view>

			<view class="">
				<view class="title">
					<text class="t-icon t-icon-41"></text>成员管理
				</view>

				<text class="t-icon t-icon-youjiantou"></text>
			</view>

			<view class="">
				<view class="title">
					<text class="t-icon t-icon-41"></text>开门记录
				</view>

				<text class="t-icon t-icon-youjiantou"></text>
			</view>
			<view class="">
				<view class="title">
					<text class="t-icon t-icon-41"></text> 我的消息
				</view>

				<text class="t-icon t-icon-youjiantou"></text>
			</view>

		</view>
		<view class="setting">
			<view class="setting-box" @click="toSetting">
				<view> <text class="t-icon t-icon-shezhi"></text> 设置</view>
				<text class="t-icon t-icon-youjiantou"></text>
			</view>
			<view class="logout" @click='tologout'>
				<view><text class="t-icon t-icon-tuichudenglu"></text> 退出登录</view>
				<text class="t-icon t-icon-youjiantou"></text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basic: [{
						icon: 't-icon-41',
						title: '业主信息'
					},
					{
						icon: 't-icon-qiyeyuanquwuye',
						title: '我的物业'
					},
					{
						icon: 't-icon-fangwu',
						title: '我的房屋'
					},
				]
			}
		},
		methods: {
			toHomePro() {
				uni.navigateTo({
					url: '/pages/homePro/homePro'
				});
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
			},
			tologout() {
				uni.navigateTo({
					url: '/pages/logout/logout'
				});
			},
			
		},
	}
</script>

<style lang="less">
	.container {
		width: 100%;
		height: 100%;
		background: #f2f2f2;
		// overflow-y: auto;
	}

	.className {
		width: 100%;
		height: 140px;
		background: #2781f1;
		text-align: center;
		line-height: 150px;
		color: white;
	}

	.basic-box {
		width: 100%;
		// padding: 10px;
		height: 140rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		// margin-top: 20rpx;
		background: white;
		align-items: center;
		>view {
			width: 20%;
			display: flex;
			flex-direction: column;

			.t-icon {
				margin: auto;
				width: 48rpx;
				height: 48rpx;
			}

			view {
				text-align: center;
			}
		}
	}

	.mineInfor {
		width: 100%;
		background: white;
		margin-top: 20rpx;

		>view {
			height: 50px;
			width: 100%;
			// padding: 20rpx;
			border-bottom: 1px solid #ccc;
			line-height: 50px;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				margin-left: 20rpx;
				display: flex;
				align-items: center;
			}

			.t-icon {
				margin-right: 20rpx;
				// text-align: center;

			}
		}
	}

	.setting {
		width: 100%;
		margin-top: 25rpx;
		background: white;

		.setting-box {
			width: 90%;
			height: 40px;
			font-size: 16px;
			display: flex;
			line-height: 40px;
			justify-content: space-between;
			align-items: center;
			margin: auto;
			border-bottom: solid 1px #f2f2f2;

			>view {
				display: flex;
				align-items: center;
				margin-right: 5px;
				color: #b6bfc3
			}

			.t-icon {
				margin-right: 20rpx;

			}
		}

		.logout {
			width: 90%;
			height: 40px;
			display: flex;
			font-size: 16px;
			line-height: 40px;
			justify-content: space-between;
			margin: auto;
			align-items: center;

			>view {
				display: flex;
				align-items: center;
				margin-right: 5px;
				color: #b6bfc3
			}

			.t-icon {
				margin-right: 20rpx;
			}
		}

	}
</style>